<template>
  <div class="page" v-if="res">
    <div class="head">
      <h1>{{ $t('我的资源') }}</h1>
      
    </div>
    <div class="panel" @click="showAction = true">
      <div class="user">
        <div class="img">
          <img src="/static/avatar.png">
        </div>
        <div class="info">
          <div class="name">{{ res.nickName }}</div>
          <div class="money">{{ $t('猴毛') }}: {{ res.balance | toFix(2) }}HM {{ $t('L猴毛') }}: {{ res.freeze | toFix(2) }} HM {{ $t('元气') }}: {{ res.freeze | toFix(2) }}</div>
        </div>
      </div>
    </div>
    <div class="panel">
      <div class="title">
        <h2><router-link tag="div" to="/order" replace>我的订单</router-link></h2>
      </div>  
    </div>
    <div class="panel">
      <div class="title">
        <h2><router-link tag="div" to="/invitation" replace>绑定推荐码</router-link></h2>
      </div>
      
      
    </div>
    
    
    
    
    <div class="panel">
      <h3 class="help">{{ $t('官方客服邮箱') }}</h3>
      <p class="email" v-clipboard="res.officialEmail" @success="isCopy(1)" @error="isCopy(0)">{{ res.officialEmail }}</p>
    </div>
    
    <actionsheet v-model="showAction" :menus="menus" show-cancel @on-click-menu="clickOption"></actionsheet>
    <div v-transfer-dom>
      <popup v-model="setPWD" @on-hide="onHide" position="left" width="100%" class="popup">
        <div class="password">
          <h1>{{ $t('设置安全密码') }}</h1>
          <p>{{ $t('敬告：安全密码不要与登录密码或其它网站密码一致，由此产生的账号被盗，本站概不负责') }}。</p>
          <group>
            <x-input :title="$t('输入安全密码')" type="password" @on-change="onChange(pwd1,pwd2)" v-model="pwd1" :min="6" placeholder=""></x-input>
            <x-input :title="$t('输入安全密码')" type="password" @on-change="onChange(pwd1,pwd2)" v-model="pwd2" :equal-with="pwd1" :min="6" placeholder=""></x-input>
            <x-input :title="$t('输入验证码')" type="number" v-model="code" class="weui-vcode">
              <x-button @click.native="sendCode" slot="right" :disabled="disabled" type="primary" mini>{{ btnText }}</x-button>
            </x-input>
          </group>
          <box gap="20px">
            <x-button type="primary" @click.native="save(pwd1,pwd2)">{{ $t('保存') }}</x-button>
            <x-button type="warn" @click.native="setPWD=false">{{ $t('关闭') }}</x-button>
          </box>
        </div>
      </popup>
    </div>
    <div v-transfer-dom>
      <alert v-model="showRecharge" title="请用绑定钱包向下方地址转账完成充值">
        <p style="line-height: 1;margin-bottom: 10px;" v-clipboard="res.rechargeAddress" @success="isCopy(1)" @error="isCopy(0)" :key="5">{{ res.rechargeAddress }}</p>
        <qrcode :value="res.rechargeAddress" type="img"></qrcode>
      </alert>
    </div>
    
  </div>
</template>

<script>
  import Help from './common/help.vue'
  import {
    Actionsheet,
    Popup,
    TransferDom,
    Group,
    XInput,
    XButton,
    Box,
    Qrcode,
    Badge,
    Alert
  } from 'vux'
  export default {
    components: {
      Actionsheet,
      Popup,
      Group,
      XInput,
      XButton,
      Box,
      Qrcode,
      Badge,
      Alert,
      Help
    },
    directives: {
      TransferDom
    },
    data() {
      return {


        res: {
            nickName: '小明',
            
          },
        showAction: false,
        btnText: '发送验证码',
        code: '',
        disabled: true,
        pwd1: '',
        pwd2: '',
        countdown: 60,
        showRecharge: false,
        menus: [ {
          label: this.$t('修改昵称')
        }, {
          label: this.$t('修改安全密码'),
          type: 'primary'
        }, {
          label: '我的钱包',
          type: 'warn'
        }, {
          label: this.$t('退出登录'),
          type: 'warn'
        }],
        setPWD: false,
        isRead: '',
        lang: '',
        showServer: false,
        // activeServer: null,
        serverList: [],
        serverStatus: null,
        activeServerUrl: '',
        serverName: '',
        activeServer: {
          id: '',
          name: '',
          status: '',
          url: ''
        },
        isshow: false
      }
    },
    mounted() {
      this.$nextTick(function() {
        this.isRead = localStorage["isRead"]
        this.lang = localStorage["lang"] || this.$i18n.locale()
        this.initData();
        this.getServerlist();
        if (this.$route.query.pwd) {
          this.setPWD = true
        }
      });
    },
    methods: {
      initData() {
        this.$http
          .get(`/game/myCenter`)
          .then(res => {
            if (res.code == 200) {
              this.res = res.result;
              if (this.$route.query.recharge) {
                this.recharge()
              }
            } else {}
          })
          .catch(function(error) {});
      },
      getServerlist() {
        var url = window.location.href;
        
        console.log()
        this.$http
          .get(`/common/listServerDict?url=${process.env.API_ROOT}`)
          .then(res => {
            if (res.code == 200) {
              this.serverList = res.result
            } else {}
          })
          .catch(function(error) {});
      },
      pickServer(item) {
        this.activeServer = item
        if(item.status == 1) {
        }else {
          // this.serverStatus = null
          
          this.$vux.toast.text('当前服务器暂不可用')
        }
      },
      jump(url) {
        window.open(url)
      },
      toAnnounce() {
        localStorage["isRead"] = this.res.newNotice
        this.$router.push('/help?type=1')
      },
      setLang(lang) {
        if (lang == 'zh-CN') {
          this.$i18n.set('en')
          this.lang = localStorage["lang"] = 'en'
        } else {
          this.$i18n.set('zh-CN')
          this.lang = localStorage["lang"] = 'zh-CN'
        }
      },
      clickOption(menuKey, menuItem) {
        switch (menuItem.label) {
          case this.$t('充值'):
            this.recharge()
            break;
          case this.$t('提现'):
            this.widthDraw()
            break;
          case this.$t('修改昵称'):
            this.rename()
            break;
          case this.$t('退出登录'):
            this.logout()
            break;
          case this.$t('修改安全密码'):
            this.setPWD = true
            break;
          case '我的钱包':
            this.$router.push(`/resetWallet`)
            break;
        }
      },
      recharge() {
        this.showRecharge = true
      },
      widthDraw() {
        var that = this;
        this.$vux.confirm.show({
          title: this.$t('是否将余额全部提现？'),
          content: this.res.otc,
          onConfirm() {
            that.$http
              .get(`/game/withdraw`)
              .then(res => {
                that.$vux.toast.text(res.msg)
                if (res.code == 200) {} else {}
              })
              .catch(function(error) {});
          }
        })
      },
      rename() {
        var that = this;
        this.$vux.confirm.prompt(this.$t('请输入新昵称'), {
          title: this.$t('修改昵称'),
          onConfirm(value) {
            that.$http
              .post(`/game/modifyNickName`, {
                nickName: value
              })
              .then(res => {
                that.$vux.toast.text(res.msg)
                if (res.code == 200) {
                  that.initData();
                } else {}
              })
              .catch(function(error) {});
          }
        })
      },
      logout() {
        this.$http.get(`/users/logout`).then((res) => {
          if (res.code == 200) {
            localStorage.removeItem("token_2")
            this.$router.replace('/login')
          } else {
            this.$vux.toast.text(res.msg)
          }
        }).catch(function(error) {});
        
      },
      // 发送验证码
      sendCode() {
        this.$http.get(`/users/sendSecurityPasswordCode`).then((res) => {
          if (res.code == 200) {
            this.countDown60()
            this.$vux.toast.text(res.msg)
          } else {
            this.$vux.toast.text(res.msg)
          }
        }).catch(function(error) {});
      },
      countDown60() {
        var countdown = this.countdown
        if (countdown == 0) {
          this.disabled = false;
          this.btnText = this.$t('发送验证码')
          this.countdown = 60;
          return;
        } else {
          this.disabled = true;
          this.btnText = this.$t('重新发送') + "(" + countdown + ")";
          this.countdown--;
        }
        setTimeout(() => {
          this.countDown60()
        }, 1000)
      },
      save(pwd1, pwd2) {
        if (pwd1 !== pwd2) {
          this.$vux.toast.text('两次输入不一致')
          return
        }
        if (pwd1.length < 6) {
          this.$vux.toast.text('密码至少需要6位')
          return
        }
        this.$http.post(`/users/paymentPassword`, {
          pwd: pwd2,
          code: this.code,
        }).then((res) => {
          if (res.code == 200) {
            this.$vux.toast.text('设置成功')
            this.setPWD = false;
          } else {
            this.$vux.toast.text(res.msg)
          }
        }).catch(function(error) {});
      },
      onChange(pwd1, pwd2) {
        if (pwd1 === pwd2 && pwd1.length >= 6) {
          this.disabled = false
        } else {
          this.disabled = true
        }
      },
      onHide() {
        this.pwd1 = '';
        this.pwd2 = '';
        this.code = '';
      }
    }
  }
</script>

<style lang="scss" scoped>
  .page {
    position: relative;
    &:before {
      content: '';
      width: 1px;
      min-height: 101%;
      position: absolute;
    }
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .icons {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .msg {
      width: 20px;
      height: 20px;
      background: url(/static/msg.svg) no-repeat;
      background-size: contain;
      margin-right: 10px;
    }
    .lang {
      width: 24px;
      height: 24px;
    }
    .en {
      background: url(/static/en.svg) no-repeat;
      background-size: contain;
    }
    .cn {
      background: url(/static/cn.svg) no-repeat;
      background-size: contain;
    }
  }
  .help {
    text-align: center;
    font-weight: 500;
    color: $tmdark;
    font-size: 22px;
  }
  .user {
    display: flex;
    .img {
      width: 50px;
      height: 50px;
      margin-right: 10px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .info {
      flex: 1;
      .name {
        font-size: 18px;
        color: $gray;
      }
      .money {
        font-size: 12px;
        color: $gray
      }
      .address {
        word-break: break-all;
        font-size: 8px;
        color: $grey
      }
    }
    &:after {
      content: '';
      display: inline-block;
      height: 10px;
      width: 10px;
      border-width: 2px 2px 0 0;
      border-color: #C8C8CD;
      border-style: solid;
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: absolute;
      top: 50%;
      margin-top: -4px;
      right: 12px;
    }
  }
  .statistics {
    display: flex;
    flex-wrap: wrap;
    max-height: 50px;
    overflow: hidden;
    transition: all .3s;
    .item {
      width: 25%;
      white-space: nowrap;
      text-align: center;
      margin-bottom: 10px;
      span {
        font-size: 16px;
        color: $gray;
      }
      p {
        font-size: 12px;
        color: $grey;
      }
    }
    &.show {
      max-height: 150px;
    }
  }
  .suggest {
    text-align: center;
    a {
      font-weight: 500;
      color: #36465d;
      font-size: 22px;
    }
  }
  .popup {
    background: #fbf9fe;
    padding-top: 12px;
  }
  .password {
    text-align: center;
    h1 {
      font-size: 20px;
    }
    p {
      font-size: 12px;
      padding: 0 12px;
    }
  }
  .news {
    text-align: center;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .server {
    max-height: 0;
    overflow: hidden;
    transition: all .5s;
    padding: 0 5px;
    &.server-show {
      max-height: 300px;
    }
    .server-item {
      background: #f1f1f1;
      border-radius: 4px;
      margin-top: 10px;
      padding: 5px 10px;
      position: relative;
      color: $tmdark;
      transition: all .2s;
      border: 1px solid transparent;
      &:after {
        content: '';
        display: block;
        height: 10px;
        width: 10px;
        border-radius: 50%;
        position: absolute;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        background: #1ee31e;
      }
      &.normal:after {
        background: #1ee31e;
      }
      &.abnormal:after {
        background: #df1f0a;
      }
      &.active {
        border: 1px solid $tmdark;
      }
    }
    .btn {
      text-align: center;
    }
  }
  .email {
    text-align: center;
    color: $link;
  }
  .record-icon {
    position: absolute;
    right: 10px;
    top: 15px;
    width: 32px;
    height: 32px;
    background: url() no-repeat 50% 50%;
    background-size: 16px 16px;
  }
  .arrow {
    margin: 0 auto;
    background: url() no-repeat 50%;
    width: 20px;
    height: 20px;
    background-size: contain;
    &.rotate {
      transform: rotate(180deg)
    }
  }
</style>